<template>
  <div class="search">
      <div class="search-name border-topbottom" >
          院校大全
      </div>
      <div class="search-input " >
          <input  v-model="keyword" class="input form-control mr-sm-2" type="search" placeholder="输入院校名称" aria-label="Search">
          <button @click="searchschool()" class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
          <!-- <input v-model="keyword" class="input" type="text" placeholder="输入院校名称" />
          <button @click="searchschool()" type="button" class="btn btn-secondary btn-sm">搜索</button> -->
      </div>
      <div
      class="search-content"
      ref="search"
      v-show="keyword"
    >
      <ul class="list-group">
        <li
          class="search-item border-bottom list-group-item "
          v-for="item of list"
          :key="item.id"
          @click="handleschoolClick(item.school_name)"
        >
          {{item.school_name}}
        </li>
        <li class="search-item border-bottom" v-show="hasNoData">
          没有找到匹配数据
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeSerach',
  data () {
    return {
      keyword: '',
      list: [],
      timer: null
    }
  },
  props: {
    school: Array
  },
  methods: {
    searchschool  () {
      if (!this.keyword) {
        var r = confirm('学校名称不能为空')
        if (r === true) {
          this.$router.push('/')
        }
      } else {
        this.$router.push('/detail/' + this.keyword)
      }
    },
    handleschoolClick (school) {
      this.$router.push('/detail/' + school)
    }
  },
  computed: {
    hasNoData () {
      return !this.list.length
    }
  },
  watch: {
    keyword () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      if (!this.keyword) {
        this.list = []
        return
      }
      this.timer = setTimeout(() => {
        const result = []
        this.school.forEach(value => {
          if (value.school_name.indexOf(this.keyword) > -1) {
            result.push(value)
          }
        })
        // for (let i in this.school) {
        //   this.school[i].forEach((value) => {
        //     if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
        //       result.push(value)
        //     }
        //   })
        // }
        this.list = result
      }, 100)
    }
  }
}
</script>

<style  scoped>
.search {
    margin-top: 30px;
    margin-left: 20px;
    font-size: 30px;
}
.search-content{
    font-size: 23px;
    width: 39%;
    z-index: 1;
    overflow: hidden;
    position: absolute;
    left:50px
}
.shousuo{
    margin-left: 20px;
}
.search-input{
    margin-top: 10px;
    margin-left: 30px;
    box-sizing: border-box;
    border-radius: 10px;
}
.input{
    box-sizing: border-box;
    border-radius: 8px;
    text-align: center;
    color: #666;
    width: 40%;
    font-size: 30px;
}
.search-name {
    font-size: 35px;
}
.btn{
    font-size: 20px;
    position:absolute;
    left:650px;
    top:262px
}
</style>
